<!-- 拟稿人选择组件，单选 -->
<template>
	<van-action-sheet v-model="showCompo" :close-on-click-overlay="false" @closed="closeSheet" title="人员" cancel-text="确定">
		<view class="topsearch">
			<van-field v-model="filterText" label="" placeholder="输入关键字进行过滤" :clearable="true" />
		</view>
		<view class="my-container">
			<view class="tree-left">
				<ly-tree :tree-data="treeData" :props="props" ref="drafter" node-key="deptId"
					:default-expanded-keys="expandKeys" @node-click="handleNodeClick"
					:filter-node-method="filterNode" :highlightCurrent="true"/>
			</view>
			<view class="tree-right">
				<van-radio-group v-model="checkedUserId">
					<view v-show="emptyData" class="text-center text-gray padding-top-sm">暂无数据</view>
					<van-cell-group>
						<van-cell v-for="(item,index) in userArr" title-style="margin-left:15rpx" :title="item.userName"
							clickable @click="selectUser(item.userId,item.userName)">
							<template #icon>
								<van-radio :name="item.userId" icon-size="30rpx" />
							</template>
						</van-cell>
					</van-cell-group>
				</van-radio-group>
			</view>
		</view>
	</van-action-sheet>
</template>

<script>
	export default {
		props: {
			showDrafter: {
				type: Boolean,
				default: false
			},
			//要显示的节点和隐藏的节点
			nodeData: {
				showNode: {
					type: String,
					default: ''
				},
				hideNode: {
					type: String,
					default: ''
				}
			},
			drafterData:{
				userName:{
					type:String,
					default:''
				},
				userId:{
					type:String,
					default:''
				}
			},

		},

		data() {
			return {
				showCompo: false, //当前组件是否显示
				expandKeys: ["0"], //默认展开的节点-对应的deptId的值
				props: function() {
					return {
						// 这里的label就可以使用函数进行自定义的渲染了
						// label(data, node) {
						// 	return '节点' + node.data.personName;
						// },
						label: 'deptName', // 指把数据中的‘personName’当做label也就是节点名称
						children: 'children' // 指把数据中的‘childs’当做children当做子节点数据
					}
				},
				filterText: '',
				treeData: [],
				deptName: [], //选中的单位信息
				deptCode: [], //选中的单位信息
				dept: '',
				deptId:'',
				userArr:[],//当前单位下的所有人员
				checkedUserId:'',//选中的人id
				checkedUserName:'',//选中人的姓名
				emptyData:true,//如果没有数据显示暂无数据
				//选中的人员信息
				userInfo:{
					userId:'',
					userName:''
				}
			}
		},
		mounted() {
			//从缓存加载单位树
			// this.getOrgTree()
		},
		watch: {
			showDrafter(val){
				this.showCompo = val
			},
			filterText(val) {
				this.$refs.drafter.filter(val);
			},
			nodeData: {
				handler(newName, oldName) {
					// if(this.util.isNotEmpty(newName)){
					this.getOrgTree()
					// }
				},
				immediate: true,
				deep: true
			},
			drafterData:{
				handler(nVal, oVal) {
					if(nVal.userId != ''){
						this.checkedUserId=nVal.userId
						this.checkedUserName = nVal.userName
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			closeSheet(){
				//关闭的时候把选中的人的信息传回父组件
				this.userInfo.userId =this.checkedUserId
				this.userInfo.userName = this.checkedUserName
				this.$emit('closeDrafterSheet',this.userInfo)
			},
			// 只有在"点击"修改的指定节点会触发(也就是说这个方法只会触发一次)，obj中包含当前选中
			handleCheck(obj) {
				// obj: {
				// 	checkedKeys: [9, 5], // 当前选中节点的id数组
				// 	checkedNodes: [{...}, {...}], // 当前选中节点数组
				// 	data: {...}, // 当前节点的数据
				// 	halfCheckedKeys: [1, 4, 2], // 半选中节点的id数组
				// 	halfCheckedNodes: [{...}, {...}, {...}], // 半选中节点的数组
				// 	node: Node {...} // 当前节点实例
				// }
			},
			// 只要节点的选中状态改变就触发（包括设置默认选中，点击选中/取消选中），会被触发多次
			handleRadioChange(obj) {
				// console.log("obj: " + JSON.stringify(obj));
				if(obj.checked == true){//{"checked":false,"node":{"time":1629361630143,"id":3459,"text":null,"checked":false,"indeterminate":false,"data":{"deptId":"002001","deptCode":"002001","deptName":"华北管理局","leaderId":"sysadmin","parentId":"002","allParentId":"0,002,002001","deptLevel":1,"sort":36,"deptType":"org","divisionId":"--","telephone":"11","address":"1","zipCode":"1     ","extend1":"华北管理局","extend2":null,"extend3":null,"extend4":null,"extend5":null,"extend6":"002001","extend7":null,"extend8":null,"extend9":null,"extend10":null,"isValid":"1","createUser":"CAAC_SYSTEM","createTime":"2021-07-27T12:30:00.011+0000","updateUser":null,"updateTime":null,"depth":null}}
					// console.log(obj.node.data.deptName)//单位名称
					// console.log(obj.node.data.deptId)//单位id
					this.dept = obj.node.data.deptName
					this.deptId = obj.node.data.deptId
				}else{
					this.dept = ''
					this.deptId = ''
				}
				// console.log('handleRadioChange', obj);
			},

			// 选人
			handleNodeClick(obj) {
				console.log(obj.data.deptName)//单位名称
				console.log(obj.data.deptId)//单位id
				this.dept = obj.data.deptName
				this.deptId = obj.data.deptId
				this.getUserInfo()
				// console.log('getNodePath', this.$refs.tree.getNodePath(obj.data));
			},
			//呈报单位查询
			filterNode(value, data) {
				if (!value) return true;
				return data.deptName.indexOf(value) !== -1;
			},

			onSelectDocType(item) {
				this.docType = item.name
				this.showDocType = false
			},
			formatDate(date) {
				return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
			},


			getOrgTree(){
				var _this = this
				this.$http({
				  url: this.$http.adornUrl(`/caac/platform/org/depts/orgDeptTree`),
				  method: 'get',
				  params: this.$http.adornParams({
					  'systemKey': this.cache.get('userInfo').systemKey,//固定值
					  'systemFlag': this.cache.get('userInfo').systemFlag,//固定值
					  'showNode':this.nodeData.showNode,//只查管理局的树
						  'hideNode':this.nodeData.hideNode

				  })
				}).then(({data}) => {
					// console.log("单位信息data: " + JSON.stringify(data.data));
					if(data.code==200){
						this.treeData = this.util.treeDataTranslate(data.data,'deptId','parentId')
						// console.log("orgTree: " + JSON.stringify(orgTree));

					}
				})
			},
			//获取呈报人列表
			getUserInfo(){
				this.userArr=[]//每次获取清空
				this.emptyData = false
				var _this = this
				this.$http({
				  url: this.$httploading.adornUrl(`/caac/platform/org/users/getUserByDeptIdAndParams`),
				  method: 'get',
				  params: this.$http.adornParams({
					  'deptId': this.deptId,//单位id
					  'page': this.page,
					  'rows': this.rows,
					  'systemKey': this.cache.get('userInfo').systemKey, //固定值
					  'systemFlag': this.cache.get('userInfo').systemFlag, //固定值
				  })
				}).then(({data}) => {
					console.log("data: " + JSON.stringify(data));
					if(data.code==200){
						if(data.data.total>0){
							this.userArr=data.data.rows
						}else{
							this.emptyData = true
						}
					}
				})
			},
			//选中的用户
			selectUser(userId,userName){
				if(userId == this.checkedUserId){
					this.checkedUserId = ""//如果再次点击，则取消选中
					this.checkedUserName=""
				}else{
					this.checkedUserId = userId
					this.checkedUserName = userName
				}
				console.log(userId,userName);
			},

		}
	}
</script>

<style>
	.van-action-sheet {
		z-index: 9999;
		min-height: 80%;
	}
	.topsearch{
		position: fixed;
		height: 90rpx;
		z-index: 99;
		width: 100%;
		border: 1rpx solid #f0f0f0;
	}
	.my-container{
		margin-top: 90rpx;
		display: flex;
		flex-direction: row;
	}
	.tree-left{
		margin-top: -20rpx;
		width: 65%;
		border-right: 1rpx solid #f0f0f0;
	}
	.tree-right{
		width: 35%;
		position: fixed;
		right: 0rpx;
		max-height: 750rpx;
		overflow: scroll;
	}
</style>
